<template>
  <div>
    <div class="kylin-form configure-confirm-table">
      <ky-table
        :getData="getHosts"
        :search_criteria="search_criteria"
        :appendToBody="true"
        :modalTable="true"
        :showSelect="tag !== 'all'"
        ref="table"
      >
        <template v-slot:search-select>
          <el-radio-group
            v-model="tag"
            class="kylin-compare-radio"
            style="vertical-align: bottom"
          >
            <el-radio-button label="all">{{
              $t("system.ip_and_agent")
            }}</el-radio-button>
            <el-radio-button label="lock">{{
              $t("system.lock_host")
            }}</el-radio-button>
          </el-radio-group>
        </template>
        <template v-slot:table-action>
          <el-button
            class="kylin-item-button"
            @click="handleLock"
            v-if="tag !== 'all'"
            :disabled="$refs.table && $refs.table.selectRow.ids.length == 0"
          >
            {{ $t("user.locking") }}
          </el-button>
          <el-button
            class="kylin-item-button"
            @click="handleLock"
            v-if="tag !== 'all'"
            :disabled="$refs.table && $refs.table.selectRow.ids.length == 0"
          >
            {{ $t("configure.unlock") }}
          </el-button>
        </template>
        <template v-slot:table>
          <el-table-column prop="ip" label="IP"> </el-table-column>
          <el-table-column prop="agentStatus" :label="$t('system.status')">
          </el-table-column>
        </template>
      </ky-table>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handlePrevios">{{ $t("previous_step") }}</el-button>
      <el-button class="kylin-button" @click="handleNext">{{
        $t("next_step")
      }}</el-button>
    </div>
  </div>
</template>

<script>
import kyTable from "@/components/KyTable";
import { getHosts, lockHosts } from "@/api/configure_group";
export default {
  props: {
    id: {
      type: Number,
    },
  },
  components: {
    kyTable,
  },
  data() {
    return {
      loading: false,
      tag: "all",
      search_criteria: {
        configHostId: this.id,
        lock: "false",
      },
    };
  },
  methods: {
    getHosts,
    handlePrevios() {
      this.$emit("click", "select");
    },
    handleNext() {
      this.$emit("click", "report");
    },
    async getIds() {
      let search = this.$refs.table.objSearch;
      let ids = [];
      let status = new Set();
      const res = await this.getHosts({
        search,
        paged: false,
      });
      res.data.data.results.map((item) => {
        ids.push(item.hostId);
        status.add(item.agentStatus);
      });
      return { ids, status };
    },
    async handleLock() {
      let ids = [],
        status = new Set();
      if (this.$refs.table.select_id == "2") {
        let data = await this.getIds();
        ids = data.ids;
        status = data.status;
      } else {
        this.$refs.table.selectRow.rows.forEach((item) => {
          status.add(item.agentStatus);
          ids.push(item.hostId)
        });
      }
      if (status.size === 2) {
        this.$message({
          type: "error",
          message: this.$t("configure.group_lock_error"),
        });
      } else {
        lockHosts({id: this.id, hostIds: ids}).then((res) => {
          if (res.data.code === "0") {
            this.$message({
              type: "success",
              message: res.data.message,
            });
            this.$refs.table.refresh();
          } else {
            this.$message({
              type: "error",
              message: res.data.message,
            });
          }
        });
      }
    },
  },
  watch: {
    tag: function (value) {
      if (value === "all") {
        this.search_criteria.lock = "=false";
      } else {
        this.search_criteria.lock = "true";
      }
      this.$refs.table.refresh();
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.configure-confirm-table {
  max-height: 600px;
  overflow: auto;
}
.kylin-compare-radio {
  margin-right: 10px;
}
</style>